<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #wrap input{
            width: 80px;
            height: 40px;

        }
        #wrap div{
            width: 400px;
            height: 400px;
            text-align: center;
            line-height: 400px;
            color: black;
            font-size: 50px;
            display: none;
        }
        #wrap div:nth-of-type(1){
            background: aqua;
        }
        #wrap div:nth-of-type(2){
            background: tan;
        }
        #wrap div:nth-of-type(3){
            background: purple;
        }
        #wrap div.block{
            display: block;
        }
        #wrap input.block{
            background-color: #c4e3f3;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <input type="button" value="按钮1" class="block">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
        <div class="block">内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>
</body>
<script>
    window.onload = function () {
        var btn = new Tab("#wrap");
        btn.init();
    }

    function Tab(obj) {
        this.oDiv = document.querySelector(obj);
        this.aBtn = this.oDiv.querySelectorAll("input");
        this.aDiv = this.oDiv.querySelectorAll("div");
    }
    Tab.prototype.init = function () {
        for (var i = 0; i<this.aBtn.length; i++){
            this.aBtn[i].index = i;
            var This = this;
            this.aBtn[i].onclick = function () {
                This.changeTab(this);
            }
        }
    }
    Tab.prototype.changeTab = function (oBtn) {
        for(var i = 0; i<this.aBtn.length; i++){
            this.aBtn[i].className = '';
            this.aDiv[i].style.display = 'none';
        }
        oBtn.className = 'block';
        this.aDiv[oBtn.index].style.display = 'block';
    }
</script>
</html>